<template>
    <basic-container>
        <el-tabs v-model="tabActiveName" @tab-click="handleClick">
            <el-tab-pane :label=newOrderAmount name="first">
            </el-tab-pane>
            <el-tab-pane :label=newOrderNum name="second">
            </el-tab-pane>
            <el-tab-pane :label=avgPrice name="third">
            </el-tab-pane>
            <el-tab-pane :label=completeOrderAmount name="Fourth">
            </el-tab-pane>
            <el-tab-pane :label=refundOrderAmount name="Fifth">
            </el-tab-pane>
        </el-tabs>

        <span>时间筛选: </span>
        <el-date-picker placeholder="开始时间" @change="getBeforeTime" value-format="yyyyMMdd" v-model="beginTime" type="date" size="mini">
        </el-date-picker>

        <span style="margin-left:10px">至</span>

        <el-date-picker style="margin-left: 10px" placeholder="结束日期" @change="getTime" value-format="yyyyMMdd" v-model="endTime" type="date" size="mini">
        </el-date-picker>

        <el-button style="margin-left: 10px" type="primary" size="small" plain  @click.stop="search()">搜索</el-button>
        <el-button style="margin-left: 10px" type="primary" size="small" plain  @click.stop="clear()">清空</el-button>
        <avue-echart-line :theme="theme" :option="option" :data="data" width="1200"></avue-echart-line>
        <avue-crud :data="orderStatisticsResult" :option="option2" v-model="option2" :row-style="rowStyle" >
        </avue-crud>
    </basic-container>
</template>



<script>
    import {
        getList
    } from "@/api/cms/seller/orderStatistics";
    export default {
        data() {
            return {
                theme:'',
                tabActiveName: 'first', //tab页切换
                newOrderAmount:'新增订单额',
                newOrderNum:'新增订单数',
                avgPrice:'平均单价',
                completeOrderAmount:'订单完成额',
                refundOrderAmount:'退款订单额',
                newOrderAmountArray:[],
                newOrderNumArray:[],
                avgPriceArray:[],
                completeOrderAmountArray:[],
                refundOrderAmountArray:[],
                beginTime: '',
                endTime: '',
                data:{
                    categories: [],
                    series: [
                        {
                            name: "新增订单额",
                            data: []
                        },
                    ]
                },
                orderStatisticsResult: [],
                option: {
                    switchTheme:true,
                    width: 1200,
                    height: 600,
                    title: '手机大比拼',
                    smooth: true,//是否顺滑
                    //areaStyle: true,//是否面积
                },

                option2:{
                    title:'交易数据',
                    menuType:'text',
                    index:true,
                    page:false,
                    align:'center',
                    dateDefault:true,
                    menuAlign:'center',
                    menu: false,
                    addBtn: false,
                    columnBtn: false,
                    refreshBtn: false,
                    column:[
                        {
                            label: "日期",
                            prop: "statTime",
                            type: "date",
                            format: "yyyy-MM-dd",
                            valueFormat: "yyyy-MM-dd",
                        },
                        {
                            label:'新增订单金额',
                            prop:'newOrderAmount'
                        },
                        {
                            label:'新增订单数量',
                            prop:'newOrderNum'
                        },
                        {
                            label:'平均单价',
                            prop:'avgPrice'
                        }, {
                            label:'已完成订单数量',
                            prop:'completeOrderNum'
                        }, {
                            label:'已完成订单金额',
                            prop:'completeOrderAmount'
                        },
                        {
                            label:'已退款订单数量',
                            prop:'refundOrderNum'
                        },
                        {
                            label:'已退款订单金额',
                            prop:'refundOrderAmount'
                        },
                        {
                            label:'已取消订单数量',
                            prop:'cancelOrderNum'
                        },
                        {
                            label:'已取消订单金额',
                            prop:'cancelOrderAmount'
                        },
                    ]
                }
            }
        },
        created() {
            this.transferMethod()
        },
        mounted(){
            console.log(this.data.series)
            console.log(this.option)
        },
        methods: {
            handleClick(tab) {
                //tab页切换
                if (tab.name == "first") {
                    this.data.series[0].data = this.newOrderAmountArray;
                    this.data.series[0].name = "新增订单额";
                } else if (tab.name == "second") {
                    this.data.series[0].data = this.newOrderNumArray;
                    this.data.series[0].name = "新增订单数";
                } else if (tab.name == "third") {
                    this.data.series[0].data = this.avgPriceArray;
                    this.data.series[0].name = "平均单价";
                } else if (tab.name == "Fourth") {
                    this.data.series[0].data = this.completeOrderAmountArray;
                    this.data.series[0].name = "订单完成额";
                } else if (tab.name == "Fifth") {
                    this.data.series[0].data = this.refundOrderAmountArray;
                    this.data.series[0].name = "退款订单额";
                }
            },

            getBeforeTime(){
                if(this.endTime){
                    if (this.beginTime > this.endTime) {
                        this.$message({
                            type: "error",
                            message: "开始时间不能大于结束时间"
                        });
                        this.beginTime = ''
                    }
                }
            },

            getTime() {
                console.log(this.beginTime)
                console.log(this.endTime)
                if (this.beginTime > this.endTime) {
                    this.$message({
                        type: "error",
                        message: "结束时间不能小于开始时间"
                    });
                    this.endTime = ''
                }
            },
            search(){
                this.newOrderAmount ='新增订单额',
                this.newOrderNum ='新增订单数',
                this.avgPrice ='平均单价',
                this.completeOrderAmount ='订单完成额',
                this.refundOrderAmount ='退款订单额',
                this.transferMethod()
            },
            clear(){
                this.beginTime = '';
                this.endTime = '';
                this.newOrderAmount ='新增订单额',
                this.newOrderNum ='新增订单数',
                this.avgPrice ='平均单价',
                this.completeOrderAmount ='订单完成额',
                this.refundOrderAmount ='退款订单额',
                this.transferMethod()
            },
            transferMethod(){
                getList(this.beginTime,this.endTime).then(res => {
                    if(res.data.code == 200){
                        let obj = res.data.data.orderStatisticsResult;
                        this.orderStatisticsResult = obj;
                        let newArrayStatTime = [];
                        let newArrayOrderAmount = [];
                        let newArrayOrderNum = [];
                        let newArrayAvgPrice = [];
                        let newArrayCompleteOrderAmount = [];
                        let newArrayRefundOrderAmount = [];
                        //订单的数量信息
                        let tempData = res.data.data;

                        this.newOrderAmount = this.newOrderAmount + '(' +tempData.newOrderAmount + ')';
                        this.newOrderNum = this.newOrderNum + '(' +tempData.newOrderNum +')';
                        this.avgPrice = this.avgPrice + '(' +tempData.avgPrice +')';
                        this.completeOrderAmount = this.completeOrderAmount + '(' +tempData.completeOrderAmount +')';
                        this.refundOrderAmount = this.refundOrderAmount + '(' +tempData.refundOrderAmount +')';
                        if(obj.length>0){
                            for(let i=0;i<obj.length;i++){
                                newArrayStatTime.push(obj[i].statTime);
                                newArrayOrderAmount.push(obj[i].newOrderAmount);
                                newArrayOrderNum.push(obj[i].newOrderNum);
                                newArrayAvgPrice.push(obj[i].avgPrice);
                                newArrayCompleteOrderAmount.push(obj[i].completeOrderAmount);
                                newArrayRefundOrderAmount.push(obj[i].refundOrderAmount);
                            }
                        }
                        //时间坐标
                        this.data.categories = newArrayStatTime;
                        //新增订单额
                        this.newOrderAmountArray = newArrayOrderAmount;
                        //新增订单数
                        this.newOrderNumArray = newArrayOrderNum;
                        //平均单价
                        this.avgPriceArray = newArrayAvgPrice;
                        //订单完成额
                        this.completeOrderAmountArray = newArrayCompleteOrderAmount;
                        //退款订单额
                        this.refundOrderAmountArray = newArrayRefundOrderAmount;
                        this.handleClick({name:this.tabActiveName})
                        console.log(res.data.data)
                    }
                    else {
                        this.$message({
                            type: "error",
                            message: res.data.message
                        });
                    }
                })
            },
            rowStyle({row,column,rowIndex}){
                if(rowIndex%2===0){
                    return {
                        backgroundColor:'#eee',
                        color:'black'
                    }
                }
            }
        }
    }
</script>